<template>
	<view>
		<view class="userQuanBj">
			<view class="flex_c setupPading">
				<view @click="avupload">
					<image class="avImg" :src="userInfo.avatar?userInfo.avatar:avatarUrl" mode=""></image>
					<view class="setTips margin10">
						点击上传头像
					</view>
				</view>
			</view>
			<view class="quanpading" style="padding: 0 50rpx;">
				<view class="flex_a">
					<view class="setTips numTips">
						<input @blur="putUser(1)" type="text" v-model="userInfo.nickName" placeholder="用户昵称" value="" />
						<input class="margin30" @blur="putUser(2)" type="text" v-model="userInfo.name"
							placeholder="用户姓名" value="" />
					</view>
				</view>
				<view class="margin50">
					用户金币余额 {{userInfo.goldCoin}}
				</view>
				<view class="margin20">
					<view  v-if="duishow">
						<input placeholder="100起提" v-model="count" type="number" />
					</view>
					<view @click="tixian" >
						兑换
					</view>
				</view>
			</view>
			<view v-if="duishow" class="setputPoat" @click="tixianFun">
				<view class="fiexdWith">
					<view class="fiexdpading">
						<view class="quanBut titleTxt">
							确认兑换
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>


<script>
	import {
		updateInfo,
		goldCoinExchange
	} from '@/utils/api/home.js';
	export default {
		data() {
			return {
				putmodalTitle: '',
				duishow:false,
				setupList: [],
				avatarUrl: '/static/av.png', // 初始头像 URL
				userInfo: uni.getStorageSync('setUserInfo'),
				count:0
			};
		},


		methods: {
		tixianFun(){
			if(this.duishow=true){
				goldCoinExchange({count:this.count}).then(res=>{
					console.log(res)
				})
			}
			
		},
			tixian(){
				this.duishow=!this.duishow
			},
			putUser(e) {
				
				updateInfo(this.userInfo).then(res => {
					console.log(res)
					this.$api.getInfo().then(res => {
						// 成功获取用户信息
						if (res.code == 200) {
							// 将用户信息存储到Vuex store
							uni.setStorageSync('setUserInfo', res.user);
						}
					})
				})
			},

			avupload() {
				uni.chooseImage({
					count: 1, // 选择一张图片
					success: chooseRes => {
						const filePath = chooseRes.tempFilePaths[0];
						const formData = {}; // 你可以在这里添加额外的表单数据
						this.uploading = true; // 开始上传
						console.log(filePath)
						// 调用上传函数
						this.$api.allupload(filePath, formData, {
							onProgressUpdate: (progress) => {
								console.log(progress)
								this.uploadPercent = progress.progress;
							}
						}).then(response => {
							this.uploading = false; // 上传完成
							this.avatarUrl = response.url || filePath; // 使用服务器返回的URL
							uni.showToast({
								title: '上传成功',
								icon: 'success'
							});

							this.userInfo.avatar = this.avatarUrl
							this.putUser(3)
						}).catch(error => {
							console.log(error)
							// this.uploading = false; // 上传失败
							uni.showToast({
								title: '头像上传失败',
								icon: 'none'
							});
						});
					},
					fail: error => {
						uni.showToast({
							title: '选择图片失败',
							icon: 'none'
						});
					}
				});
			}
		},
		async created() {
			this.$api.getInfo().then(res => {
				// 成功获取用户信息
				if (res.code == 200) {
					// 将用户信息存储到Vuex store
					uni.setStorageSync('setUserInfo', res.user);
				}
			})
			const userInfo = uni.getStorageSync('userInfo');
		}

	}
</script>


<style scoped lang="scss">
	.setputPoat {
		position: fixed;
		bottom: 100rpx;

		.fiexdWith {
			width: 750rpx;

			.fiexdpading {
				padding: 0 85rpx;
			}

			.zhuxiao {
				background: #282E47;
				color: #A1A0B6;
				margin-top: 32rpx;
			}

		}
	}

	.setupPading {
		padding-top: 250rpx;

		.avImg {
			width: 189rpx;
			height: 189rpx;
			opacity: 1;
			box-sizing: border-box;
			border: 2px solid #F6F6F6;
			border-radius: 50%;
			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
			transition: transform 0.3s ease, box-shadow 0.3s ease;
			object-fit: cover;
		}

		.avImg:hover {
			transform: rotate(360deg);
			box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.3);
		}
	}

	.setTips {
		font-family: MiSans;
		font-size: 24rpx;
		font-weight: normal;
		line-height: normal;
		color: #fff;
		text-align: center;
	}

	.numTips {
		margin-right: 20rpx;

		input {
			text-align: left;
		}
	}
</style>